<template>
  <div class="notice_page">
    <!-- 头部导航 -->
    <CommonHeader title="系统公告" />
    <!-- 公告主体 -->
    <div class="notice_content page_no_tab_bar">
      <ul class="notice_list">
        <li v-for="(item, index) in noticeList" :key="index">
          <div class="left">
            <img src="@/assets/common/notice_icon.png" alt="" />
          </div>
          <div class="right">
            <div>{{ item.title }}</div>
            <div class="font_color">发布时间: {{ item.createTime }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { getSystemNotice } from "@/api/system";

// 参数
const queryParams = ref({
  language: "zh",
  pageNo: 1,
  pageSize: 10,
})
// 公告列表
const noticeList = ref();

// 获取系统公告列表
const getData = () => {
  getSystemNotice(queryParams.value).then((res: any) => {
    noticeList.value = res.data.records;
  });
};

// 初始化数据
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.notice_page {
  .notice_content {
    .notice_list {
      li {
        display: flex;
        margin-bottom: 10px;
        padding: 10px 0;
        .left {
          padding: 0 20px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .right {
          div:last-child {
            margin-top: 5px;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
